<template>
  <view>
    <picker mode="region" :value="areas" @change="bindAreaChange">
      <view class="picker">{{area?area:'请选择'}}</view>
    </picker>
    <button @click="submit">提交</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        areas: [],
        area: "",
      };
    },
    methods: {
      bindAreaChange(e) {
        this.areas = e.target.value;
        this.area = this.areas.join(",");
      },
      submit() {
        console.log(this.areas, this.area);
      }
    }
  }
</script>

<style lang="scss">
  .picker {
    width: 500rpx;
    height: 80rpx;
    border: 1px solid #EEEFEF;
    line-height: 80rpx;
  }
</style>